import { DtlParamManager, inputCpmGetter, setSchemaCpm, t, useFormItemConfig, useNowDpSearchHelper, useSelectSearchHelper } from '@/utils/common'
import { DpmObs, DpmPipe } from '../util'
import { FunctionalComponent, nextTick, ref } from 'vue'
import { Button, Modal } from 'ant-design-vue'
/*表头表单*/
export const useHeaderForm = (dpm: DtlParamManager<DpmPipe, DpmObs>) => {

  <% if (typeof headerFields !== 'undefined' && Array.isArray(headerFields) && headerFields.length > 0) { %>
    const headerSchemas: SchemaCpm[] = [
      <% headerFields.forEach(function(param) { %>
        {
          ...useFormItemConfig('<%= param.description %>', '<%= param.fieldName %>', 8),
          ...inputCpmGetter(null, {
            disabled: false,
          }),
        },
      <% }); %>
    ]
  <% } else { %>
    const headerSchemas: SchemaCpm[] = [
        {
          ...useFormItemConfig('中心统一编号', 'centralUnifiedNo', 8),
          ...inputCpmGetter(null, {
            disabled: false,
          }),
        },
      ]
  <% } %>

  const { FormEl: headerForm, wrapMethods: headerMethods } = dpm.formManager.createForm({
    name: 'header',
    formProps: {
      labelWidth: 160,
      schemas: headerSchemas,
      disabled: false,
    },
  })

  return {
    headerForm,
    headerMethods,
  }
}

export const useBodyForms = (dpm) => {
  console.log('🚀 ~ useForms ~ dpm:', dpm)
  const { selectMapPatch, setSelectOpts } = useSelectSearchHelper([])
  const nowDpFields = []
  const nowDpMapPatch = useNowDpSearchHelper(nowDpFields)
  const cpmGetterMap = new Map<string, SchemaCpmGetter>([...selectMapPatch, ...nowDpMapPatch])
  const getOptions = async () => {
    setSelectOpts([])
  }
  const afterGetSchemas = (schemas: Recordable[]): Recordable[] => {
    return setSchemaCpm(schemas, cpmGetterMap)
  }
  return {
    getOptions,
    afterGetSchemas,
  }
}

export const useBodyInfoForms = (dpm) => {
  console.log('🚀 ~ useBodyInfoForms ~ dpm:', dpm)

  const bodyInfoModel = ref<Recordable | null>(null)

  <% if (typeof  detailFormFields !== 'undefined' && Array.isArray( detailFormFields) &&  detailFormFields.length > 0) { %>
    const bodyInfoSchemas: SchemaCpm[] = [
      <%  detailFormFields.forEach(function(param) { %>
        {
          ...useFormItemConfig('<%= param.description %>', '<%= param.fieldName %>', 8),
          ...inputCpmGetter(null, {
            disabled: false,
          }),
        },
      <% }); %>
    ]
  <% } else { %>
    const bodyInfoSchemas: SchemaCpm[] = [
        {
          ...useFormItemConfig('中心统一编号', 'centralUnifiedNo', 8),
          ...inputCpmGetter(null, {
            disabled: false,
          }),
        },
      ]
  <% } %>


  const { FormEl: BodyInfoForm, wrapMethods: bodyInfoMethods } = dpm.formManager.createForm({
    name: 'bodyInfo',
    formProps: {
      labelWidth: 120,
      schemas: bodyInfoSchemas,
      disabled: false,
    },
  })

  const isBodyInfoModalShow = ref(false)
  const openBodyInfoModal = (row?: Recordable) => {
    bodyInfoModel.value = row ?? {}
    isBodyInfoModalShow.value = true
    nextTick(() => {
      bodyInfoMethods.getFieldsValue()
    })
  }

  const save = async () => {
    let { wrapMethods } = await dpm.formManager.getFormContext('bodyInfo')
    console.log('🚀 ~ useHeaderActions ~ values:', wrapMethods.getFieldsValue())
  }

  const BodyInfoModal: FunctionalComponent = () => {
    return isBodyInfoModalShow.value ? (
      <Modal
        title={t('表体详情')}
        visible={isBodyInfoModalShow.value}
        onCancel={() => {
          isBodyInfoModalShow.value = false
        }}
        footer={null}
        width={1000}
        destroyOnClose={true}
      >
        <div style={'margin: 20px;'}>
          <BodyInfoForm></BodyInfoForm>
        </div>
        <div style={'width:100%;display: flex;justify-content: center;padding: 20px;gap: 20px;'}>
          <Button
            onClick={() => {
              isBodyInfoModalShow.value = false
            }}
          >
            {t('取消')}
          </Button>
          <Button type="primary" onClick={save}>
            {t('确定')}
          </Button>
        </div>
      </Modal>
    ) : null
  }

  return { openBodyInfoModal, BodyInfoModal }
}
